<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn :c-message="message" :c-movies="movies"></cpn>
</div>
<template id="cpn">
    <div>
        <ul>
            <li v-for="item in cMovies">{{item}}</li>
        </ul>
        <h2>{{cMessage}}</h2>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: '你好啊',
            movies: ['海王', '海贼王', '海尔兄弟']
        },
        components: {
            'cpn': {
                template: "#cpn",
                // method1
                // props: ['cmessage', 'cmovies'],

                //method2 可以进行类型判断
                // props: {
                //     cmessage: String,
                //     cmovies: Array
                // },

                //method3 设置默认参数
                props: {
                    cMessage: {
                        type: String,
                        default: '默认参数',
                        require: true  //一定要传的参数
                    },
                    cMovies: {
                        type: Array,
                        default() {
                            return ['空数组1', '空数组2']
                        },
                        require: false  //不一定要传的参数
                    }
                },
                data() {
                    return {}
                }
            }
        }
    })
</script>
</body>
</html>